import React from 'react';
import ReactDOM from 'react-dom';
import { Pagination, Menu } from 'antd';
import BasicLayout from "@/src/layouts";
import Nav from "@components/nav";
import { MailOutlined, AppstoreOutlined, SettingOutlined, SearchOutlined, ClockCircleOutlined, FireOutlined } from '@ant-design/icons';
import 'antd/dist/antd.css'
import PostThumbnail from './PostThumbnail';
import axios from 'axios';
import sty from "./Forum.module.css"
import API from '@common/api.js';
import userStore from "../../common/userStore";
const { SubMenu } = Menu;
class Search extends React.Component {
    constructor(props) {
        super(props);
        this.changePage = this.changePage.bind(this);
        this.useAxiosToGetAPI = this.useAxiosToGetAPI.bind(this);
        this.state = {
            currentPage: 1,
            searchKey: userStore.getState().searchKey,
            postsInfo: []
        }
        console.log("Search initialized!")
        this.useAxiosToGetAPI(this.state.searchKey, 1, 10).then((ret) => {
            console.log("The searched posts' info result is:");
            console.log(ret);
            console.log("The data is:");
            let data = ret["data"];
            console.log(data);
            this.setState({
                currentPage: 1,
                postsInfo: data,
                totalPosts: 100
            });
        });
        this.changeSearchKey = this.changeSearchKey.bind(this);
        userStore.subscribe(this.changeSearchKey);
    }


    changeSearchKey() {
        this.useAxiosToGetAPI(userStore.getState().searchKey, 1, 10).then((ret) => {
            console.log("RE: The searched posts' info result is:");
            console.log(ret);
            console.log("The data is:");
            let data = ret["data"];
            console.log(data);
            this.setState({
                currentPage: 1,
                postsInfo: data,
                totalPosts: 100,
                searchKey: userStore.getState().searchKey,
            },()=>{console.log('Search key changed postsInfo:'); console.log(this.state.postsInfo)});
        });
    }

    async useAxiosToGetAPI(searchKey, from, to) {
        return await API.search(searchKey, from, to);
    }


    changePage(page, pageSize) {
        let start = (page - 1) * pageSize + 1;
        let end = page * pageSize;
        this.useAxiosToGetAPI(this.state.searchKey, start, end).then((ret) => {
            console.log("The API result of posts' info is:");
            console.log(ret);
            console.log("The data is:");
            let data = ret["data"];
            console.log(data);

            this.setState({
                currentPage: page,
                postsInfo: data
            }, () => { console.log('Current page is ' + this.state.currentPage) });
        });
    }

    render() {
        console.log("Search rendering!");
        const postThumbnailList = this.state.postsInfo.map(info => {
            // console.log(info.)
            return <PostThumbnail key={info.id} info={info} />;
        });
        return (
            <div className={sty.Forum}>
                <Menu mode="horizontal" selectedKeys="search" onClick={(e)=>{if(e.key != 'search')
                    userStore.dispatch({type:'search', isSearch: false, order: e.key}); }}>
                    <Menu.Item key="recent" icon={<ClockCircleOutlined />}>
                        最新
                    </Menu.Item>
                    <Menu.Item key="popular" icon={<FireOutlined />}>
                        热门
                    </Menu.Item>
                    <Menu.Item key="search" icon={<SearchOutlined />}>
                        搜索关键词：{this.state.searchKey}
                    </Menu.Item>

                </Menu>
                <div className={sty.List}> {postThumbnailList} </div>
                <Pagination className={sty.Pagi} total={this.state.totalPosts} current={this.state.currentPage} onChange={this.changePage}
                            hideOnSinglePage={true} showSizeChanger={false} showQuickJumper={false}>
                </Pagination>

            </div>
        );
        // style={{backgroundColor: '#e6e6e6' }}
    }
}

export default Search;